import { Button, Divider, Drawer, Form, Input, Select, Space } from 'antd';
import FormItem from 'antd/lib/form/FormItem';
import { useToggle } from 'react-use';
import ContentWrapper from '../../../component/contentWrapper';
import PageTable from '../../../component/pageTable/pageTable';
import IPageInterface from '../../../interface/pageInterface';
import EquipmentConfigEdit from '../edit';
import './index.less'

interface IEquipmentConfigProps {

}

const EquipmentConfig: React.FC<IEquipmentConfigProps> = (props) => {
    const [visible, setVisible] = useToggle(false);
    const [editVisible, seteditVisible] = useToggle(false);
    return (
        <ContentWrapper gap={16} >
            <Space>
                <span>设备名称：</span>
                <Input placeholder="输入设备名称：" />
                <Button type="primary" >搜索</Button>
                <Button onClick={setVisible} >添加设备</Button>
            </Space>
            <PageTable
                columns={[
                    {
                        title: "设备名称",
                        render: () => <div>温度计</div>
                    },
                    {
                        title: "添加时间",
                        render: () => <div>2017-11-11</div>
                    },
                    {
                        title: "创建人",
                        render: () => <div>吕布</div>
                    },
                    {
                        title: "状态",
                        render: () => <div>启用</div>
                    },
                    {
                        width: 100,
                        title: "操作",
                        render: () => {
                            return (
                                <Button type="link" onClick={seteditVisible} size="small" >编辑</Button>
                            )
                        }
                    },


                ]}
                func={async (pageNo, pageSize) => {
                    return { total: 20, data: [1, 2, 3, 4, 5] }
                }}
            />
            {
                editVisible &&
                <EquipmentConfigEdit visible={editVisible} onClose={seteditVisible} />
            }
            <Drawer footer={
                < Space >
                    <Button type="primary" >保存配置</Button>
                    <Button>取消</Button>
                </Space>
            } width={600} title="添加设备" onClose={setVisible} visible={visible}>
                <Form labelCol={{ span: 5 }} wrapperCol={{ offset: 2 }} >
                    <Divider orientation="left" >
                        基础配置
                    </Divider>
                    <FormItem label="设备名称" rules={[{ required: true }]} >
                        <Input placeholder="输入设备名称" maxLength={6} />
                    </FormItem>
                    <FormItem label="状态" >
                        <Select defaultValue="1" >
                            <Select.Option value="1" >正常</Select.Option>
                            <Select.Option value="0" >禁用</Select.Option>
                        </Select>
                    </FormItem>
                    <Divider orientation="left" >
                        参数配置
                    </Divider>
                    <FormItem label="监听字段" rules={[{ required: true }]}>
                        <Input placeholder="输入监听字段" maxLength={11} />
                    </FormItem>
                    <FormItem label="字段名称" rules={[{ required: true }]}>
                        <Input placeholder="输入字段名称" maxLength={16} />
                    </FormItem>
                    <FormItem label="字段数据结构" rules={[{ required: true }]}>
                        <Select defaultValue="0" >
                            <Select.Option value="0" >数字</Select.Option>
                            <Select.Option value="1" >字符串</Select.Option>
                            <Select.Option value="2" >布尔变量</Select.Option>
                        </Select>
                    </FormItem>
                    {/* <FormItem label="报警配置" rules={[{ required: true }]}>
                        <div>
                            当值大于某个值时触发报警
                        </div>
                    </FormItem> */}
                    <Divider orientation="left" >
                        下发指令配置
                    </Divider>
                    <FormItem label="下发指令名称" rules={[{ required: true }]}>
                        <Input placeholder="输入下发指令名称" maxLength={11} />
                    </FormItem>
                    <FormItem label="下发指令字段" rules={[{ required: true }]}>
                        <Input placeholder="输入下发指令字段" maxLength={11} />
                    </FormItem>
                    <FormItem label="下发指令参数" rules={[{ required: true }]}>
                        <Input placeholder="输入下发指令参数" maxLength={11} />
                    </FormItem>

                </Form>
            </Drawer>
        </ContentWrapper>
    );
}

const EquipmentConfigPage: IPageInterface<IEquipmentConfigProps> = {
    title: "设备配置",
    path: "/equipment/config",
    // group: "设备管理",
    component: EquipmentConfig
}

export default EquipmentConfigPage;